@mixin baseStyle($w:1200px,$h:auto,$c:auto){
    width: $w;
    height: $h;
    background: $c;
}
@mixin baseFont($s:14px,$lh:30px,$w:normal,$c:auto){
    font-family: arial,"Hiragino Sans GB","Microsoft Yahei","å¾®è½¯é›…é»‘","å®‹ä½“",Tahoma,Arial,Helvetica,STHeiti;
    font-size: $s;
    line-height: $lh;
    font-weight: $w;
    color: $c;
}
@mixin basePosition($p:absolute,$l:auto,$r:auto,$t:auto,$b:auto){
    position: $p;
    left: $l;
    right: $r;
    top: $t;
    bottom: $b;
}


*{
    margin: 0;
    padding: 0;
}
html{
    font-family: sans-serif;
    body{
        @include baseStyle($w:100%,$h:100%,$c:#f3f3f3);
        @include baseFont($c:#76797b);
        header{
            @include baseStyle($w:100%,$h:50px,$c:rgba(0,0,0,0.8));
            position:relative;
            z-index: 2;
            .logo{
                @include baseStyle($h:100%);
                margin:0 auto;
                @include basePosition($p:relative,$l:0,$t:0);
                #lg{
                    display:block;
                    padding:8px 15px;
                    font-size:0;
                    float:left;
                    h1{
                        width:84px;
                        height:34px;
                        background:url('http://res.alltuu.com/static/images/navbar-logo.png') no-repeat;
                        background-size:100% 100%;
                        
                    }
                }
                #lg1{
                    list-style: none;
                    li{
                        float:left;
                        padding:10px 15px;
                        a{
                            @include baseFont($c:#fff);
                            text-decoration: none;
                        }
                        &:hover{
                            background:rgba(0,0,0,0.1);
                        }
                    }
                }
                input{
                    @include baseStyle($w:150px,$h:30px);
                    margin:8px 15px;
                    text-indent: 5px;
                    float:right;
                    transition:0.3s all;
                    outline: none;
                }
                #lg2{
                    list-style: none;
                    height:50px;
                    float:right;
                    li{
                        float:left;
                        padding:14px 0;
                        a{
                            padding:0 15px;
                            @include baseFont($c:#fff);
                            text-decoration: none;
                        }
                    }
                }
            }
        }
        //遮罩层的设置
        #wai{
            @include baseStyle($w:100%,$h:100%,$c:rgba(0,0,0,0.2));
            @include basePosition($p:fixed,$t:0,$l:0);
            z-index: 5000;
            display:none;
        }
        //内部登录注册的设置
        #register{
            @include baseStyle($w:338px,$h:382px,$c:#fff);
            padding:30px 60px 20px;
            border:1px solid #eee;
            @include basePosition($p:fixed,$l:50%,$t:10%);
            z-index: 55;
            margin-left:-230px;
            color:#C8CED3;
            display:none;
            #phone,#pass{
                @include baseStyle($w:338px,$h:50px);
                outline: none;
                text-indent: 10px;
                border-radius:2px;
                border:1px solid #ccc;
            }
            .ww{
                display:flex;
                align-items:center;
                margin-bottom:10px;
                .f1{
                    font-size:20px;
                    margin:0 5px;
                }
            }
            .dl{
                display:block;
                @include baseStyle($w:100%,$c:#0099e5);
                @include baseFont($s:20px,$lh:50px,$c:#fff);
                text-align:center;
            }
            a{
                text-decoration: none;
                color:#C8CED3;
            }
            li{
                margin-bottom:10px;
            }
            li:nth-child(5){
                @include baseFont($s:12px,$c:black);
                display:flex;
                align-items:center;
                justify-content: space-between;
                span{
                    display:flex;
                    align-items:center;
                }
            }
            #link{
                @include baseStyle($w:100%,$h:73px);
                border-top:1px solid black;
                margin-top:45px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                position:relative;
                i{
                    @include baseStyle($w:90px,$c:#fff);
                    @include basePosition($l:50%,$t:-12px);
                    @include baseFont($c:black);
                    margin-left:-45px;
                    font-style: normal;
                    text-align:center;
                }
            }
            #code,#cell,#pass1{
                @include baseStyle($w:100%,$h:50px);
                outline: none;
                text-indent: 10px;
                border-radius:2px;
                border:1px solid #ccc;
            }
        }
        #rWrap{
            @include basePosition($p:fixed,$r:30px,$b:80px);
            z-index: 1000;
            ul{
                @include baseStyle($w:42px,$h:200px);
                list-style: none;
                li{
                    @include baseFont($c:black,$lh:16px);
                    text-align: center;
                    a{
                        @include baseFont($c:black);
                        display: inline-block;
                        text-align: center;
                        text-decoration: none;
                    }
                }
            }
        }
        section{
            @include baseStyle($w:100%,$c:#fff);
            padding-top: 45px;
            box-shadow: 0 3px 5px rgba(6, 0, 1, 0.08);
            .type,.addr{
                @include baseStyle();
                margin: 0 auto;
                span{
                    display: inline-block;
                    padding: 0 22px;
                    float: left;
                }
                a{
                    display: inline-block;
                    text-align: center;
                    text-decoration: none;
                    border-radius: 36px;
                    padding: 0 8px;
                    border: 1px solid #d8dee0;
                    margin-bottom: 5px;
                    margin-right: 5px;
                    @include baseFont($c:#90969b);
                    &:hover{
                        color: #0099E5;
                        border: 1px solid #0099e5;
                    }
                }
                a:first-child{
                    @include baseStyle($w:auto,$c:#0099e5);
                    @include baseFont($c:#fff);
                }
            }
            .addr{
                margin-top: 16px;
                padding-bottom: 36px;
            }
            .type-right,.addr-right{
                @include baseStyle($w:1124px);
                box-sizing: border-box;
                display: inline-block;
            }
        }
        main{
            .head{
                @include baseStyle($h:100px,$c:url('http://res.alltuu.com/static/images/service/product-demand.jpg'));
                margin: 0 auto;
                margin-top: 20px;
                background-repeat: no-repeat;
                background-position: center;
                position: relative;
                a{
                    display: inline-block;
                    @include baseStyle($w:150px,$h:43px,$c:#fff);
                    border-radius: 43px;
                    text-align: center;
                    @include baseFont($s:20px,$lh:43px,$c:#0099e5);
                    text-decoration: none;
                    @include basePosition($r:136px,$t:27%);
                    &:hover{
                        background: #0099e5;
                        color: #fff;
                        transition: all 0.3s;
                    }
                }
            }
            .main{
                @include baseStyle($c:#fff);
                margin: 0 auto;
                margin-top: 15px;
                ul{
                    list-style: none;
                    li{
                        @include baseStyle($w:280px,$h:220px);
                        float: left;
                        margin: 30px 9px 0 9px;
                        border: 1px solid #e6eef0;
                        padding-bottom: 90px;
                        overflow: hidden;
                        position: relative;
                        img{
                            @include baseStyle($w:100%,$h:100%);
                        }
                        p{
                            @include baseStyle($w:100%,$h:204px,$c:#fff);
                            margin-top: -10px;
                            @include basePosition($t:230px);
                            transition: all 0.5s;
                            span{
                                display: inline-block;
                            }
                            .name{
                                width: 226px;
                                @include baseFont($s:16px,$lh:40px,$c:#414141);
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                padding-left: 5px;
                                margin-right: 54px;
                            }
                            img{
                                @include baseStyle($w:52px,$h:52px);
                                border-radius: 50%;
                                border: 2px solid #e4e4e4;
                                @include basePosition($t:-15px,$r:2px);
                                &:hover{
                                    @include baseStyle($w:54px,$h:54px);
                                    transition: all 0.3s;
                                }
                            }
                            .pgName{
                                float: right;
                                @include basePosition($p:relative,$r:10px,$t:-12px);
                                @include baseFont($c:#414141);
                                &:hover{
                                    color: #0099E5;
                                }
                            }
                            .price{
                                @include baseStyle($w:266px);
                                @include baseFont($s:18px,$lh:20px,$c:#0099e5);
                                margin: 0 auto;
                                padding: 12px 0;
                                border-bottom: 1px solid #9c9c9c;
                                .s2{
                                    @include basePosition($p:absolute,$r:5px);
                                    img{
                                        @include baseStyle($w:16px,$h:16px);
                                        border: none;
                                        @include basePosition($p:relative)
                                    }
                                }
                            }
                            .ol{
                                padding: 14px 5px 0 5px;
                                @include baseFont($lh:20px,$c:#666666);
                                height: 100px;
                                overflow: hidden;
                            }
                        }
                        &:hover p{
                            @include basePosition($t:110px);
                        }
                    }
                }
            }
        }
        footer{
            @include baseStyle($w:100%,$h:240px,$c:#333333);
            float: left;
            color:#76797F;
            margin-top: 40px;
            p{
                width:1200px;
                margin:0 auto;
                text-align:center;
                font-size:12px;
                padding:10px 0 20px 0;
            }
            ul:nth-child(1){
                @include baseStyle($h:93px);
                margin:0 auto;
                line-height:93px;
                padding:0 36px;
                text-align:center;
                border-bottom:1px solid #76797F;
                li{
                    display:inline-block;
                    color:#76797f;
                    a{
                        text-decoration: none;
                        @include baseFont($c:#76797f);
                        padding:0 15px;
                    }
                }
            }
            ul:nth-child(2){
                @include baseStyle($w:1070px,$h:72px);
                margin:0 auto;
                line-height:30px;
                padding:10px 83px;
                border-bottom:1px solid #76797F;
                li{
                    display:inline-block;
                    color:#76797f;
                    a{
                        text-decoration: none;
                        @include baseFont($s:12px,$c:#76797f);
                        padding:0 15px;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
    
}
